<template>
	<view class="dist-paris-page">
		<TopBar
			left-icon="/static/user.png"
			scan-icon="/static/saoyisao.png"
			menu-icon="/static/menu.png"
			@menu="toggleMenu"
		/>

		<scroll-view scroll-y class="form-scroll">
			<!-- 返回箭头 -->
			<view class="back-row" @click="goBack">
				<image class="back-arrow-icon" src="/static/left.png" mode="aspectFit" />
			</view>

			<!-- 搜索框 -->
			<view class="search-box">
				<image src="/static/search.png" class="search-icon" />
				<input class="search-input" placeholder="Value" />
			</view>

			<text class="page-title">QR code & Passport</text>

			<!-- 同一卡片背景下的编号与日期 -->
			<view class="info-card-merged">
				<text class="info-chip">VA7585241</text>
				<text class="info-chip">23/09/2025</text>
			</view>

			<!-- 卡片列表：两列 -->
			<view class="grid">
				<view class="grid-item" v-for="(item, i) in items" :key="i">
					<view class="card">
						<view class="card-top">
							<view class="chk" :class="{ checked: item.checked }" @click="toggle(i)">
								<text class="tick">✓</text>
							</view>
							<text class="code">{{ item.code }}</text>
						</view>
						<view class="media">
							<image :src="item.image" class="thumb" mode="aspectFit" />
							<view class="meta">
								<text class="name">T shirt</text>
								<text class="units">100 units</text>
							</view>
						</view>
						<input class="qty-input" placeholder="QTY" />
					</view>
				</view>
			</view>
			<view class="bottom-actions">
				<text class="bottom-btn ok" @click="onOk">OK</text>
				<text class="bottom-btn cancel" @click="onCancel">Cancle</text>
			</view>
		</scroll-view>

		<CustomTabbar active="import" />

		<AccountMenu
			v-if="showMenu"
			:style="{ '--anchor-top': '70px', '--anchor-right': '0px' }"
			@close="closeMenu"
			@select="closeMenu"
		/>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import TopBar from '@/components/TopBar.vue'
import CustomTabbar from '@/components/CustomTabbar.vue'
import AccountMenu from '@/components/AccountMenu.vue'

const showMenu = ref(false)
const toggleMenu = () => { showMenu.value = !showMenu.value }
const closeMenu = () => { showMenu.value = false }
const goBack = () => { uni.navigateTo({ url: '/pages/brand/distribution' }) }

const items = ref([
  { code: '46DC85241', image: '/static/record/type1.png', checked: true },
  { code: '46DC85241', image: '/static/record/type2.png', checked: true },
  { code: '46DC85241', image: '/static/record/type3.png', checked: true },
  { code: '46DC85241', image: '/static/record/type4.png', checked: true },
  { code: '36DC76542', image: '/static/record/type5.png', checked: true },
  { code: '36DC76542', image: '/static/record/type6.png', checked: true },
])

const onCheck = () => {}
const toggle = (index) => { items.value[index].checked = !items.value[index].checked }

const onOk = () => { uni.navigateTo({ url: '/pages/brand/order-confirm' }) }
const onCancel = () => { uni.navigateTo({ url: '/pages/brand/distribution-paris-unchecked' }) }
</script>

<style lang="scss">
.dist-paris-page { min-height: 100vh; background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%); }
.form-scroll { margin-top: 60px; padding: 0 12px 84px 12px; box-sizing: border-box; }
.back-row { margin: 12px 0 0 -8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.back-arrow-icon { width: 24px; height: 24px; }

.search-box { height: 44px; background: #fff; border-radius: 24px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.search-icon { width: 16px; height: 16px; margin-right: 6px; }
.search-input { flex: 1; font-size: 14px; color: #333; }

.page-title { display: block; margin: 14px 4px 10px; font-size: 18px; font-weight: 800; color: #0b1e2a; }
.info-row { display: flex; gap: 8px; margin: 0 4px 12px; }
.info-chip { background: #eaf6ff; border-radius: 10px; padding: 10px 12px; color: #0b1e2a; font-size: 12px; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-item { display: block; }
.card { background: #e7f5f7; border-radius: 12px; box-shadow: none; padding: 12px; }
.card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.code { color: #0b1e2a; font-weight: 700; font-size: 12px; }

/* 自定义黑底白勾复选框 */
.chk { width: 16px; height: 16px; border-radius: 4px; border: 2px solid #000; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; }
.chk.checked { background: #000; }
.chk .tick { color: #fff; font-size: 12px; line-height: 1; transform: translateY(-1px); opacity: 0; }
.chk.checked .tick { opacity: 1; }

.media { display: flex; align-items: center; gap: 10px; }
.thumb { width: 48px; height: 48px; border-radius: 8px; background: #fff; }
.meta { display: flex; flex-direction: column; gap: 2px; }
.name { color: #0b1e2a; font-size: 13px; }
.units { color: #0b1e2a; font-size: 12px; font-weight: 700; }

.qty-input { margin-top: 10px; height: 32px; border-radius: 18px; background: #fff; border: none; padding: 0 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); font-size: 12px; color: #0b1e2a; }

/* 合并卡片背景 */
.info-card-merged { display: flex; justify-content: space-between; align-items: center; background: #eaf6ff; border-radius: 12px; padding: 10px 12px; margin: 0 4px 12px; box-shadow: 0 6px 16px rgba(0,0,0,.08); }

/* 底部按钮条 */
.bottom-actions { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; margin: 20px 0 24px; }
.bottom-btn { text-align: center; border-radius: 10px; padding: 8px 14px; font-weight: 700; }
.bottom-btn.ok { background: #f0f0f0; color: #1a1a1a; border: 1px solid #1a1a1a; }
.bottom-btn.cancel { background: #f0f0f0; color: #1a1a1a; border: 1px solid #1a1a1a; }
</style>


